<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="plantillas/disenio_comun.xhtml">

	<!-- This methods defined in head HTML tag -->
	<ui:define name="head">
	
		<!-- Stylesheets import. 
		<h:outputStylesheet name="home.css" library="css" />
		-->

	</ui:define>

	<ui:define name="contenido">
	
		<h:form id="FormularioPlanificacion">
		<p:growl id="growl" showDetail="true" />
			<div>			
				<table border="0" cellpadding="5" cellspacing="0"  bgcolor="#EEEEEE">
					
					<tr>				 
				    	<td colspan="4" align="center">
				    		<h2 align="center"><h:outputText value="Consultar Planificacion de Talleres"/></h2>
				    		
				    	</td>
					</tr>
					<p:messages  id="response" globalOnly="true" showDetail="true" autoUpdate="false" closable="true" />
					
				     <tr>
				      		<td colspan="4" align="left">
				      		<p:commandButton id="ver" value="Ver Cronograma" icon="ui-icon-disk" style="font-size: 80%" update=":FormularioPlanificacion:panelChart" oncomplete="popupCronograma.show()" title="Ver Cronograma de Talleres." 
				      		actionListener="#{controladorPlanificacion.verCronograma}"/>               	
				      	
				  			</td>
				     </tr>
					
				  	<tr>
				    	<td colspan="3" align="center">		
				    		    			<p:dataTable id="tablaTalleres" var="taller" 
									    		value="#{controladorPlanificacion.talleres}"						    		
									    		paginator="true" rows="5"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaTaller"   
									            emptyMessage="Ningún taller se encontro con con el criterio dado"
									            tableStyle="width:700px;font-size: 85%" >  
									  				
									  		<f:facet name="header">  
										        Talleres disponibles
										    </f:facet>
										    
										     <p:column id="columnaNombreTaller" filterBy="#{taller.nombre}"   
									        		sortBy="#{taller.nombre}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left;" >						             
									            <h:outputText value="#{taller.codigo} - #{taller.nombre}" />
									            <p:watermark forElement="FormularioPlanificacion:tablaTalleres:columnaNombreTaller" value="Buscar..." />  
									        </p:column> 
									          <p:column id="columnaNombreUnidad" filterBy="#{taller.nombre_unidad}"   
									        		sortBy="#{taller.nombre_unidad}"
									                headerText="Unidad Ejecutora" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.nombre_unidad}" />
									            <p:watermark forElement="FormularioPlanificacion:tablaTalleres:columnaNombreUnidad" value="Buscar..." />  
									        </p:column> 
									        <p:column id="columnaFechaInicio" filterBy="#{taller.strFechaInicio}"   
									        		sortBy="#{taller.strFechaInicio}"
									                headerText="Fecha de Inicio" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaInicio}" />
									            <p:watermark forElement="FormularioPlanificacion:tablaTalleres:columnaFechaInicio" value="Buscar..." />  
									        </p:column> 
									         <p:column id="columnaFechaFin" filterBy="#{taller.strFechaFin}"   
									        		sortBy="#{taller.strFechaFin}"
									                headerText="Fecha de Fin" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaFin}" />
									            <p:watermark forElement="FormularioPlanificacion:tablaTalleres:columnaFechaFin" value="Buscar..." />  
									        </p:column> 
									        <p:column headerText="" style="width:110px">  
								                 <p:commandButton id="seleccionar"  update=":FormularioPlanificacion:tablaCoordinadores,:FormularioPlanificacion:tablaFormadores,:FormularioPlanificacion:"  icon="ui-icon-search" value="Ver Detalle" style="font-size: 80%" title="Seleccionar el taller">  
								                      <f:setPropertyActionListener value="#{taller}" target="#{controladorPlanificacion.tallerSeleccionado}" />
								                 </p:commandButton>
								             
									        </p:column> 

									    </p:dataTable>
							
						</td>
						<td style="vertical-align:text-top;" rowspan="7">
							<p:fieldset legend="Documentos">  
							    						    
							    
							     <p:tree id="docTree" value="#{controladorPlanificacion.root}" var="doc" style="text-align:left;" selectionMode="single" dynamic="true">  
							
              
							        <p:treeNode expandedIcon="ui-icon-folder-open"  
							                    collapsedIcon="ui-icon-folder-collapsed">  
							            <h:outputText value="#{doc.nombre_archivo}"/>  
							        </p:treeNode>  
							        				
							  
							        <p:treeNode type="document" icon="ui-icon-document">  
							        	<p:commandLink value="#{doc.nombre_archivo}" ajax="false"  onclick="PrimeFaces.monitorDownload(start, stop)">  
									        <p:fileDownload value="#{controladorPlanificacion.download(doc.id_documento)}" />
									    </p:commandLink>  		       							          
							        </p:treeNode>  
							  
							        <p:treeNode type="picture" icon="ui-icon-image">  
							            <h:outputText value="#{doc.nombre_archivo}" />  
							        </p:treeNode>  
							  
							        <p:treeNode type="mp3" icon="ui-icon-video">  
							            <h:outputText value="#{doc.nombre_archivo}" />  
							        </p:treeNode>  
							    </p:tree>  
							    
							    
							      
							   
							</p:fieldset>  
  		
						</td>
				  	</tr>
				  	<tr>
					  	<td colspan="4" align="center">
					  		<h:outputLabel value="" />
					  	</td>
					</tr>
					<tr>
					  	<td colspan="3" align="center" >
					  		<b><h:outputLabel value="#{controladorPlanificacion.nombreTallerSeleccionado}" rendered="#{controladorPlanificacion.mostrarTaller}" /></b>
					  	</td>
					</tr>
				  
					<tr>
					  	<td colspan="3" align="center">
					  		<p:dataTable id="tablaCoordinadores" var="coordinador" 
									    		value="#{controladorPlanificacion.coordinadores}"						    		
									    		paginator="true" rows="3"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaCoordinadores"   
									            emptyMessage="El taller no cuenta con un coordinador asociado"
									            tableStyle="width:700px;font-size: 85%" >  
									  				
									  		<f:facet name="header">  
										        Coordinadores Asociados al Taller Seleccionado
										    </f:facet>
										    
										     <p:column id="columnaNombreCoordinador" sortBy="#{coordinador.nombres}"
									                headerText="Nombre"  style="text-align:left;" >						             
									            <h:outputText value="#{coordinador.nombres}" />
									        </p:column> 
									         <p:column id="columnaApePatCoordinador" sortBy="#{coordinador.ape_pat}"
									                headerText="Apellido Paterno"  style="text-align:left;" >						             
									            <h:outputText value="#{coordinador.ape_pat}" />
									        </p:column> 
									        <p:column id="columnaApeMatCoordinador" sortBy="#{coordinador.ape_mat}"
									                headerText="Apellido Materno"  style="text-align:left;" >						             
									            <h:outputText value="#{coordinador.ape_mat}" />
									        </p:column> 
									        
									         <p:column id="columnaDniCoordinador" sortBy="#{coordinador.dni}"
									                headerText="DNI"  style="text-align:left;" >						             
									            <h:outputText value="#{coordinador.dni}" />
									        </p:column> 
									         <p:column id="columnaCargoLaboralCoordinador" sortBy="#{coordinador.strCargoLaboral}"
									                headerText="Cargo Laboral"  style="text-align:left;" >						             
									            <h:outputText value="#{coordinador.strCargoLaboral}" />
									        </p:column> 
									    </p:dataTable>
					  	
					  		
					  	</td>
					  	<td style="vertical-align:text-top;">
											
						</td>
					</tr>
					
						<tr>
					  	<td colspan="4" align="center">
					  		<h:outputLabel value="" />
					  	</td>
					</tr>
				  
					<tr>
					  	<td colspan="3" align="center">
					  		<p:dataTable id="tablaFormadores" var="formador" 
									    		value="#{controladorPlanificacion.formadores}"						    		
									    		paginator="true" rows="3"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaFormadores"   
									            emptyMessage="El taller no cuenta con formadores asociados."
									            tableStyle="width:700px;font-size: 85%" >  
									  				
									  		<f:facet name="header">  
										        Formadores Asociados al Taller Seleccionado
										    </f:facet>
										    
										     <p:column id="columnaNombreFormador" sortBy="#{formador.nombres}"
									                headerText="Nombre"  style="text-align:left;" >						             
									            <h:outputText value="#{formador.nombres}" />
									        </p:column> 
									         <p:column id="columnaApePatFormador" sortBy="#{formador.ape_pat}"
									                headerText="Apellido Paterno"  style="text-align:left;" >						             
									            <h:outputText value="#{formador.ape_pat}" />
									        </p:column> 
									        <p:column id="columnaApeMatFormador" sortBy="#{formador.ape_mat}"
									                headerText="Apellido Materno"  style="text-align:left;" >						             
									            <h:outputText value="#{formador.ape_mat}" />
									        </p:column> 
									        
									         <p:column id="columnaDniFormador" sortBy="#{formador.dni}"
									                headerText="DNI"  style="text-align:left;" >						             
									            <h:outputText value="#{formador.dni}" />
									        </p:column> 
									         <p:column id="columnaCargoLaboralFormador" sortBy="#{formador.strCargoLaboral}"
									                headerText="Cargo Laboral"  style="text-align:left;" >						             
									            <h:outputText value="#{formador.strCargoLaboral}" />
									        </p:column> 
									    </p:dataTable>
					  	
					  		
					  	</td>
					  	<td style="vertical-align:text-top;">
											
						</td>
					</tr>
				</table>
			</div>
			
			
			<p:dialog header="Diagrama de Gantt" widgetVar="popupCronograma" resizable="false"  
              width="1024" height="600" showEffect="explode" hideEffect="explode" modal="true">  
  
		        <h:panelGrid id="panelChart" columns="1" cellpadding="4">  
		  
		            <f:facet name="header">  
		            	<p:outputPanel id="imageCronograma">
					  		<p:graphicImage value="#{controladorPlanificacion.chart}" >
					  			 <f:param name="aaa" value="#{controladorPlanificacion.date}"/>
					  		</p:graphicImage>
					  	</p:outputPanel>
					  		
		            			        
		            </f:facet>  
		  
		        </h:panelGrid> 
		         
			</p:dialog> 
			
			
			<p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">  
			    <p:graphicImage value="resources/imagenes/comun/ajax-loader.gif" />  
			</p:dialog>  
  
    
		</h:form>
		
		 <script type="text/javascript">  
		
		 function start() {
		     statusDialog.show();
		 }
		  
		 function stop() {
		     statusDialog.hide();
		 }
		
		</script>  
		

	</ui:define>
</ui:composition>